<template>
    <div>
        <h3>演示ref获取元素或组件的引用，readonly shallowReadonly用法等</h3>
        <p>readonly 创建只读数据并且递归只读，即每一层只读</p>
        <p>shallowReadonly 创建第一层只读数据</p>
        <p ref="boxRef">测试获取ref</p>
        <button @click="test">点击测试readonly</button>
    </div>
</template>
<script>
import {ref, onMounted, readonly, shallowReadonly, isReadonly} from 'vue'
export default {
    name: 'RefZqf',
    setup(){
        //通过ref获取元素，区别于vue2.x的this.$refs.xxx  注意：变量名必须和元素ref的属性值一致
        let boxRef = ref(null)
        onMounted(()=>{
            console.log('11', boxRef.value)
						console.log('testref', testref.value)
        })
        console.log('22', boxRef.value)
        
        //readonly 创建只读数据并且递归只读，即每一层只读
        let obj = readonly({name: 'zqf1', info: {num: '123'}})
        //shallowReadonly 创建第一层只读数据
        let obj2 = shallowReadonly({name: 'zqf2', info: {num: '123'}})

        function test() {
            obj.name = '123'
            obj2.name = '123'
            obj2.info.num = 1111
            console.log(obj)//不改变
            console.log(obj2)//info.num改变
            console.log(isReadonly(obj), isReadonly(obj2))//true  true
        }
        return {boxRef, obj, test, obj2, testref}
    }
}
</script>